﻿.jumbotron, .jumbotron.jumbotron-light .overlay {
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}

.jumbotron {
    padding: 0;
    margin-bottom: 0;

    h1, h2, h3, h4 {
        color: inherit;
    }

    @media (min-width: @screen-sm-min) {
        h1 {
            font-size: @jumbotron-heading-font-size;
        }
    }

    p {
        font-size: @jumbotron-text-font-size; // overwrite bootstrap jumbotron <p> font size
        line-height: 1.7;
    }

    &.jumbotron-light {
        color: @white-color;
        background-color: @gray-darker;

        .overlay {
            background-image: url(../../Images/overlay.png);
        }
    }

    &.jumbotron-dark {
        color: @gray-darker;
        background-color: @gray-lighter;
    }

    .container {
        min-height: 420px;
        position: relative; // for vertical align = middle
        @media (min-width: @screen-sm-min) {
            min-height: 520px;
        }

        @media (min-width: @screen-lg-min) {
            min-height: 720px;
        }

        .jumbotron-content {
            position: absolute;
            top: 50%;
            -webkit-transform: translateY(-50%);
            -ms-transform: translateY(-50%);
            transform: translateY(-50%);
            padding-right: 35px;
            .btn {
                width: auto;
            }
            @media (min-width: @screen-xs-min) {
                max-width: 50%;
                padding-right: 0;
            }
        }
    }
}
